<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>消息通知器</h1>
      <div id="status" class="status stopped">
        <span class="status-dot"></span>
        <span class="status-text">已停止</span>
      </div>
    </div>

    <div class="section">
      <h3>服务器设置</h3>
      <div class="form-group">
        <label for="apiUrl">消息API地址:</label>
        <input type="text" id="apiUrl" placeholder="https://api.example.com/messages">
        <small>当前使用模拟数据</small>
      </div>
      
      <div class="form-group">
        <label for="pollInterval">检查间隔 (秒):</label>
        <input type="number" id="pollInterval" min="5" max="3600" value="30">
      </div>
    </div>

    <div class="section">
      <h3>控制</h3>
      <div class="button-group">
        <button id="startBtn" class="btn btn-primary">开始监听</button>
        <button id="stopBtn" class="btn btn-secondary">停止监听</button>
        <button id="testBtn" class="btn btn-test">测试通知</button>
      </div>
    </div>

    <div class="section">
      <h3>最后消息</h3>
      <div id="lastMessage" class="last-message">
        暂无消息
      </div>
    </div>

    <div class="footer">
      <div id="lastCheck">最后检查: 从未</div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>